<template>
	<div id="loading">

		<div class="tabs-light pane tabs-bottom tabs-standard tabs-item-hide" abstract="true" nav-view="active" style="opacity: 1; transform: translate3d(0%, 0px, 0px);">
			<div class="guess_top">
				<!--进度条-->
				<div class="guess_top_loadingLine" style="margin-top: -0.514599px; width: 260px; height: 278.029px;">
					<!--canvas-->
					<canvas id="canvas" width="260" height="278.02919708029196"></canvas>
					<!--遮盖canvas-->
					<div class="guess_top_mask">

					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default{
		data () {
			return{
				GRID_ID_PREFIX: "guess",
				targetId: "",
				horn: "1",
				type: "R",
				coinTypeMap: {
					one: 10,
					five: 50,
					ten: 100
				},
				girdsInfoMap: {
					guess0: {
						gridid: "guess0",
						shownum: "15;17;19;21;23;25;27"
					},
					guess1: {
						gridid: "guess1",
						shownum: "14;15;16;17;18;19;20;21;22;23;24;25;26;27"
					},
					guess2: {
						gridid: "guess2",
						shownum: "0;2;4;6;8;10;12;14;16;18;20;22;24;26"
					},
					guess3: {
						gridid: "guess3",
						shownum: "14;16;18;20;22;24;26"
					},
					guess4: {
						gridid: "guess4",
						shownum: ""
					},
					guess5: {
						gridid: "guess5",
						shownum: ""
					},
					guess6: {
						gridid: "guess6",
						shownum: "1;3;5;7;9;11;13"
					},
					guess7: {
						gridid: "guess7",
						shownum: "0;1;2;3;4;5;6;7;8;9;10;11;12;13"
					},
					guess8: {
						gridid: "guess8",
						shownum: "1;3;5;7;9;11;13;15;17;19;21;23;25;27"
					},
					guess9: {
						gridid: "guess9",
						shownum: "0;2;4;6;8;10;12"
					}
				},
				chipFlag: "",
				myPage: {
					chipStartId: [],
					chooseChipId: "one",
					targetId: ""
				},
				accountMoney: 0,
				winsAniNums: 0,
				bettingInfo: {
					maxBetting: 1000,
					noBettingFlag: false,
					gtrade_time_out: 0,
					cfRate: 0.1,
					curBetting: 0,
					curCounterFee: 0,
					gridInfo: {}
				},
				ballNumArray: [],
				audioMap: {},
				muteFlag: false,
				chipFlag: 10,
				curBetting: "0",
				curCountFee: "0",
				historyNumList: [],
				curphaseid: "",
				timeoutss: 0,
				originalWH: {
					outter: {
						w: 822,
						h: 879
					},
					child1: {
						w: 240,
						h: 213
					},
					child2: {
						w: 324,
						h: 213
					},
					child3: {
						w: 324,
						h: 372
					},
					position: {
						left: 249,
						top: 223
					}
				},
				billId: ""

			} // end return
		},
		mounted () {

			global.curphaseids = "20170608-1049";
			global.queryRetSrvJson = {};
			global.winningNumberObj = {
				firstStr: "",
				lastStr: "",
				lastNumArray: [],
				lastNumSum: 0
			}
			global.srvJson = {
				gtradesrvstat: {
					curphaseid: "20170608-0956",
					timeoutss: "40"
				},
				usertrades: {
					nickname: "147****2086",
					torderdir: "",
					tordernum: 5,
					ttargetid: "QQ_ONLINE",
					ttradeprofit: 50
				}
			}
			srvJson.history = []
			srvJson.history.push({"curphaseid":"20170608-1051","luckynum":241688525,"details":[]},{"curphaseid":"20170608-1050","luckynum":241612146},{"curphaseid":"20170608-1049","luckynum":241645163},{"curphaseid":"20170608-1048","luckynum":241569827},{"curphaseid":"20170608-1047","luckynum":241594748},{"curphaseid":"20170608-1046","luckynum":241576032},{"curphaseid":"20170608-1045","luckynum":241567735},{"curphaseid":"20170608-1044","luckynum":241574553},{"curphaseid":"20170608-1043","luckynum":241569700},{"curphaseid":"20170608-1042","luckynum":241552963},{"curphaseid":"20170608-1041","luckynum":241507541},{"curphaseid":"20170608-1040","luckynum":241478899},{"curphaseid":"20170608-1039","luckynum":241452000},{"curphaseid":"20170608-1038","luckynum":241427568},{"curphaseid":"20170608-1037","luckynum":241344412},{"curphaseid":"20170608-1036","luckynum":241389085},{"curphaseid":"20170608-1035","luckynum":241381534},{"curphaseid":"20170608-1034","luckynum":241384704},{"curphaseid":"20170608-1033","luckynum":241389790},{"curphaseid":"20170608-1032","luckynum":241401953})
			global.countDownObj = {};
			countDownObj.getadustTimeMap = function() {
				return {
					"420": false,
					"370": false,
					"300": false,
					"230": false,
					"150": false
				}
			}
			;
			countDownObj.adustTimeMap = countDownObj.getadustTimeMap();
			countDownObj.cdCanvas = null;
			countDownObj.DEF_INV = 100;
			countDownObj.CD_ALLTIME = 60;
			countDownObj.countdownInterval = countDownObj.DEF_INV;
			countDownObj.countdownType = 2;
			countDownObj.curccNum = countDownObj.CD_ALLTIME * 10;
			countDownObj.cdSetFlag = false;
			global.JSUtils = {
				system: {
					addHandler: function(element, type, handler) {
						if (element.addEventListener) {
							element.addEventListener(type, handler, false)
						} else {
							if (element.attachEvent) {
								element.attachEvent("on" + type, handler)
							} else {
								element["on" + type] = handler
							}
						}
					},
					setTimeOut: function(callback, timeout, param) {
						var args = Array.prototype.slice.call(arguments, 2);
						var _cb = function() {
							callback.apply(null, args)
						};
						return window.setTimeout(_cb, timeout)
					},
					setInterval: function(callback, timeout, param) {
						var args = Array.prototype.slice.call(arguments, 2);
						var _cb = function() {
							callback.apply(null, args)
						};
						return window.setInterval(_cb, timeout)
					},
					getPageParamVal: function(name) {
						var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
						var r = window.location.search.substr(1).match(reg);
						if (r != null) {
							return r[2]
						} else {
							return null
						}
					}
				},
				number: {
					getSepNum: function(inputValue, minValue, maxValue) {
						if (inputValue < minValue) {
							inputValue = minValue
						} else {
							if (inputValue > maxValue) {
								inputValue = maxValue
							}
						}
						return inputValue
					},
					getMin: function(val1, val2) {
						if (val1 > val2) {
							return val2
						} else {
							return val1
						}
					},
					getMax: function(val1, val2) {
						if (val1 > val2) {
							return val1
						} else {
							return val2
						}
					},
					getRandomInt: function(min, max) {
						if (min > max || max < 0) {
							throw "getRandomInt  指定参数错误"
						}
						var tmp = 0;
						if (min < 0) {
							tmp = min;
							max = max - min;
							min = 0
						}
						return JSUtils.number.chnInt(Math.random() * (max - min + 1) + min) + tmp
					},
					getFormatNum: function(num) {
						if (isNaN(JSUtils.number.chnInt(num))) {
							return num
						}
						if (JSUtils.number.chnInt(num) == parseFloat(num)) {
							return JSUtils.number.chnInt(num)
						} else {
							return parseFloat(num)
						}
					},
					formatNumeric: function(num, numericLen) {
						var val = Math.pow(10, numericLen);
						num = JSUtils.number.chnInt(Math.round(num * val)) / val;
						var str = num.toString();
						var str1, num1, num2 = str.indexOf(".");
						if (num2 == -1) {
							num1 = numericLen;
							if (numericLen != 0) {
								str += "."
							}
						} else {
							str1 = str.substr(num2 + 1, str.length);
							num1 = numericLen - str1.length
						}
						var str2 = "";
						for (var i = 0; i < num1; i++) {
							str2 += "0"
						}
						return str + str2
					},
					formatMoney: function(num) {
						return JSUtils.number.formatNumeric(num, 2)
					},
					IN: function(val, array) {
						for (var i = 0; i < array.length; i++) {
							if (val == array[i]) {
								return true
							}
						}
						return false
					},
					chnInt: function(req) {
						return parseInt(req, 10)
					},
					oneFloat: function(param) {
						var param = param + "";
						var strarr = param.split(".");
						if (strarr.length <= 1) {
							strarr.push("0")
						} else {
							if (strarr[1].length > 1) {
								strarr[1] = (strarr[1] + "").substr(0, 1)
							}
						}
						return strarr
					},
					fiveFloat: function(param) {
						var param = param + "";
						var strarr = param.split(".");
						if (strarr.length <= 1) {
							strarr.push("00000")
						} else {
							if (strarr[1].length >= 5) {
								strarr[1] = (strarr[1] + "").substr(0, 5)
							} else {
								if (strarr[1].length < 5 || strarr[1].length > 0) {
									if (strarr[1].length == 1) {
										strarr[1] = strarr[1] + "0000"
									} else {
										if (strarr[1].length == 2) {
											strarr[1] = strarr[1] + "000"
										} else {
											if (strarr[1].length == 3) {
												strarr[1] = strarr[1] + "00"
											} else {
												if (strarr[1].length == 4) {
													strarr[1] = strarr[1] + "0"
												}
											}
										}
									}
								}
							}
						}
						return strarr
					},
					moneySplitIntAndFloat: function(money) {
						money = JSUtils.number.formatMoney(money);
						if (!money) {
							return ["0", "00"]
						} else {
							var str = money + "";
							var strarr = str.split(".");
							if (strarr.length <= 1) {
								strarr.push("00")
							} else {
								if (strarr[1].length <= 1) {
									strarr[1] += "0"
								} else {
									if (strarr[1].length > 1) {
										strarr[1] = strarr[1].substr(0, 2)
									}
								}
							}
							return strarr
						}
					}
				},
				object: {
					hasProperty: function(obj) {
						for (var i in obj) {
							return true
						}
						return false
					},
					hasSepProperty: function(obj, propName) {
						return obj.hasOwnProperty(propName)
					},
					deleteSepProperty: function(obj, propName) {
						delete obj[propName]
					},
					exist: function(obj) {
						try {
							if (obj == null) {
								return false
							}
							if (obj == undefined) {
								return false
							}
							return typeof (obj) != "undefined"
						} catch (e) {
							return false
						}
					},
					strToJsonObj: function(jsonStr) {
						if (JSUtils.string.isAvailably(jsonStr)) {
							return eval("(" + jsonStr + ")")
						}
						return eval("(null)")
					},
					toJsonStr: function(obj) {
						return JSON.stringify(obj)
					},
					jsonClone: function(jsonObj) {
						var buf;
						if (jsonObj instanceof Array) {
							buf = [];
							var i = jsonObj.length;
							while (i--) {
								buf[i] = JSUtils.object.jsonClone(jsonObj[i])
							}
							return buf
						} else {
							if (jsonObj instanceof Object) {
								buf = {};
								for (var k in jsonObj) {
									buf[k] = JSUtils.object.jsonClone(jsonObj[k])
								}
								return buf
							} else {
								return jsonObj
							}
						}
					},
					arraySort: function(array, order, columnName) {
						array.sort(function(obj1, obj2) {
							var val1, val2, tmpVal;
							var ret;
							val1 = obj1[columnName];
							val2 = obj2[columnName];
							if (order == 0) {
								tmpVal = val2;
								val2 = val1;
								val1 = tmpVal
							}
							if (val1 < val2) {
								ret = -1
							} else {
								if (val1 > val2) {
									ret = 1
								} else {
									ret = 0
								}
							}
							return ret
						})
					}
				},
				string: {
					isAvailably: function(str) {
						if (str == null) {
							return false
						}
						if (typeof (str) == "undefined") {
							return false
						}
						if (str == "") {
							return false
						}
						if (str == "null" || str == "undefined") {
							return false
						}
						return true
					},
					getAvailablyString: function(str1, str2) {
						return JSUtils.string.isAvailably(str1) ? str1 : str2
					},
					getFormatString: function(str, replaceWords) {
						var ret = str;
						if (replaceWords == null) {
							return str
						}
						for (var i = 0; i < replaceWords.length; i++) {
							var re = eval("/\\{" + i + "\\}/ig");
							ret = ret.replace(re, replaceWords[i])
						}
						return ret
					},
					replaceWord: function(source, rep1, rep2) {
						return source.replace(new RegExp(rep1,"gm"), rep2)
					},
					getStressHtml: function(str, replaceWords, stressWordCss) {
						if (replaceWords == null) {
							return str
						}
						for (var i = 0; i < replaceWords.length; i++) {
							var tmpRepObj = replaceWords[i];
							if (typeof (tmpRepObj) == "object") {
								replaceWords[i] = JSUtils.string.getReplaceSpan(tmpRepObj.css, tmpRepObj.word)
							} else {
								replaceWords[i] = JSUtils.string.getReplaceSpan(stressWordCss, tmpRepObj)
							}
						}
						return JSUtils.string.getFormatString(str, replaceWords)
					},
					getNormalHtml: function(str, replaceWords, stressWordCss) {
						if (replaceWords == null) {
							return str
						}
						for (var i = 0; i < replaceWords.length; i++) {
							var tmpRepObj = replaceWords[i];
							if (typeof (tmpRepObj) == "object") {
								replaceWords[i] = "<span class='noempty " + tmpRepObj.css + "'>" + tmpRepObj.word + "</span>"
							} else {
								replaceWords[i] = "<span class='noempty " + stressWordCss + "'>" + tmpRepObj + "</span>"
							}
						}
						return JSUtils.string.getFormatString(str, replaceWords)
					},
					getReplaceSpan: function(css, word) {
						return "<span class='noempty " + css + "'> " + word + " </span>"
					},
					getRandomUrlParams: function() {
						return "random=" + (new Date().getTime() + Math.random())
					},
					startWith: function(sourceStr, startStr) {
						var d = startStr.length;
						return ( d >= 0 && sourceStr.indexOf(startStr) == 0)
					},
					endWith: function(sourceStr, endStr) {
						var d = sourceStr.length - endStr.length;
						return ( d >= 0 && sourceStr.lastIndexOf(endStr) == d)
					},
					contains: function(sourceStr, containStr) {
						return ( sourceStr.indexOf(containStr) > 0)
					},
					phoneToShow: function(phoneNum) {
						if (!JSUtils.form.check.isPhone(phoneNum)) {
							return phoneNum
						}
						return phoneNum.substring(0, 3) + "******" + phoneNum.substring(phoneNum.length - 2, phoneNum.length)
					}
				},
				form: {
					check: {
						isEmpty: function(objVal) {
							return !JSUtils.string.isAvailably(objVal)
						},
						isMail: function(objVal) {
							var pattern = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
							return pattern.test(objVal)
						},
						isDigit: function(objVal) {
							var reg = new RegExp("^[0-9]*$");
							return reg.test(objVal)
						},
						isPhone: function(str) {
							var re = /^(13[0-9]{9})|(14[0-9]{9})|(15[0-9]{9})|(18[0-9]{9})$/;
							return re.test(str)
						}
					}
				},
				data: {},
				localSave: {
					get: function(key) {
						var localStr = window.localStorage.getItem(key);
						return JSUtils.object.strToJsonObj(localStr)
					},
					set: function(key, val) {
						var localStr = JSUtils.object.toJsonStr(val);
						window.localStorage.setItem(key, localStr)
					},
					remove: function(key) {
						window.localStorage.removeItem(key)
					},
					sessionGet: function(key) {
						var localStr = window.sessionStorage.getItem(key);
						return JSUtils.object.strToJsonObj(localStr)
					},
					sessionSet: function(key, val) {
						var localStr = JSUtils.object.toJsonStr(val);
						window.sessionStorage.setItem(key, localStr)
					},
					sessionRemove: function(key) {
						window.sessionStorage.removeItem(key)
					}
				},
				date: {
					timeStrTODate: function(timeStr) {
						if (!JSUtils.string.isAvailably(timeStr)) {
							return null
						}
						if (timeStr.length != 14) {
							return null
						}
						var str = timeStr.substr(0, 4) + "/" + timeStr.substr(4, 2) + "/" + timeStr.substr(6, 2) + " " + timeStr.substr(8, 2) + ":" + timeStr.substr(10, 2) + ":" + timeStr.substr(12, 2);
						return new Date(str)
					},
					timeStrToTime: function(timeStr) {
						if (!JSUtils.string.isAvailably(timeStr)) {
							return null
						}
						if (timeStr.length != 14) {
							return null
						}
						return timeStr.substr(4, 2) + "." + timeStr.substr(6, 2) + " - " + timeStr.substr(8, 2) + ":" + timeStr.substr(10, 2) + ":" + timeStr.substr(12, 2)
					},
					dateToTimeStr: function(data) {
						var year = data.getFullYear();
						var month = "";
						var date = "";
						var hours = "";
						var minutes = "";
						var seconds = "";
						if ((Number(data.getMonth()) + 1) < 10) {
							month = "0" + (Number(data.getMonth()) + 1)
						} else {
							month = (Number(data.getMonth()) + 1)
						}
						if (Number(data.getDate()) < 10) {
							date = "0" + data.getDate()
						} else {
							date = data.getDate()
						}
						if (Number(data.getHours()) < 10) {
							hours = "0" + data.getHours()
						} else {
							hours = data.getHours()
						}
						if (Number(data.getMinutes()) < 10) {
							minutes = "0" + data.getMinutes()
						} else {
							minutes = data.getMinutes()
						}
						if (Number(data.getSeconds()) < 10) {
							seconds = "0" + data.getSeconds()
						} else {
							seconds = data.getSeconds()
						}
						return year + month + date + hours + minutes + seconds
					}
				},
				curApp: {
					isApp: function() {
						if (window.trade && window.trade.gettype) {
							var str = window.trade.gettype();
							var strObj = JSUtils.object.strToJsonObj(str);
							return strObj.type
						} else {
							return false
						}
					},
					iosCopy: function(val) {
						if (window.trade && window.trade.copynumber) {
							window.trade.copynumber(val)
						}
					},
					constants: {
						urlHistory: false,
						targetType: function(data) {
							if (!JSUtils.string.isAvailably(data)) {
								return JSUtils.localSave.get("targetTypeObj")
							}
							var dataInfos = data.data["targetinfos"];
							var dataInfosObj = {};
							for (var i = 0; i < dataInfos.length; i++) {
								dataInfosObj[dataInfos[i]["id"]] = dataInfos[i]["type"]
							}
							JSUtils.localSave.set("targetTypeObj", dataInfosObj)
						},
						analogTradeId: "BTC_JPY"
					},
					withDraw: false,
					bankinfo: function() {
						var bankinfo = JSUtils.localSave.get("bankinfoLists");
						var obj = {};
						for (var i = 0; i < bankinfo.length; i++) {
							obj[bankinfo[i]["bank_id"]] = bankinfo[i]["bank_name"];
							obj[bankinfo[i]["bank_name"]] = bankinfo[i]["bank_id"]
						}
						return obj
					},
					sessionObj: {
						put: function(key, value) {
							if (!JSUtils.string.isAvailably(value)) {
								return
							}
							var sessionObj = JSUtils.curApp.sessionObj.__getObj();
							if (!sessionObj) {
								sessionObj = {}
							}
							sessionObj[key] = value;
							JSUtils.curApp.sessionObj.__saveObj(sessionObj)
						},
						get: function(key) {
							var sessionObj = JSUtils.curApp.sessionObj.__getObj();
							if (sessionObj) {
								return sessionObj[key]
							}
							return ""
						},
						__getObj: function() {
							var sessionObj = JSUtils.localSave.get("sessionObj");
							if (!sessionObj) {
								sessionObj = {}
							}
							return sessionObj
						},
						__saveObj: function(sobj) {
							JSUtils.localSave.set("sessionObj", sobj)
						}
					}
				}
			};
			global.timeOutControl = {
				secTimeout: -1,
				srvQueryRetTimeout: -1,
				reInitTimeout: -1,
				srvNoMarkTimeout: -1,
				flyCoinTimeout: -1,
				reinitTimeout: -1
			}

			global.horseContent = "";
			global.horseContent = "";
			global.usertradenickname = "";
			global.usertrattradeprofit = "";




			//todo: 初始运行
			this.g_pageInit()
		},
		methods: {
			g_adjustPageInitWH() {
				//todo: loading
				var titleWidth = $(window).width() - 60;
				var lineHeight = titleWidth * this.originalWH.outter.h / this.originalWH.outter.w;
				var orangeWidth = titleWidth * this.originalWH.child2.w / this.originalWH.outter.w;
				var domLeft = titleWidth * this.originalWH.position.left / this.originalWH.outter.w + "px";
				var domTop = lineHeight * this.originalWH.position.top / this.originalWH.outter.h + "px";


				countDownObj.cdCanvas = new DrawCircle();
				var canvasObj = document.getElementById("canvas");
				canvasObj.setAttribute("width", titleWidth.toString());
				canvasObj.setAttribute("height", lineHeight.toString());
				var hh = orangeWidth * this.originalWH.child3.h / this.originalWH.child3.w;
				countDownObj.cdCanvas.drawCircleInit("canvas", {
					x: parseFloat(domLeft) + orangeWidth / 2,
					y: parseFloat(domTop) + hh / 2
				}, hh, 1.5, "#072060");
				//todo: loading end
			},
			g_pageInit () {
				this.g_adjustPageInitWH();
				this.g_playCountDown(2, 60);
			},
			g_playCountDown (cdType, cdTime) {
				countDownObj.countdownType = cdType;
				if (countDownObj.countdownType == 1) {
					countDownObj.curccNum = countDownObj.CD_ALLTIME * 10;
					countDownObj.countdownInterval = (cdTime - this.bettingInfo.gtrade_time_out) * countDownObj.DEF_INV / (countDownObj.CD_ALLTIME - this.bettingInfo.gtrade_time_out)
				} else {
					countDownObj.curccNum = cdTime * 10
				}
				this.g_loopCountDown()
			},
			g_loopCountDown () {
				countDownObj.cdCanvas.beginDraw((10 / countDownObj.CD_ALLTIME) * (countDownObj.CD_ALLTIME * 10 - countDownObj.curccNum));
				countDownObj.curccNum--;
				timeOutControl.secTimeout = window.setTimeout(this.g_loopCountDown, countDownObj.countdownInterval)
			}
		},
		components: {
		}
	}



	function DrawCircle() {}
	DrawCircle.prototype = {
		drawCircleInit: function(canvasId, pos, roundNum, initAngle, fillStyle) {
			this.pos = pos;
			this.roundNum = roundNum;
			this.initAngle = initAngle;
			this.fillStyle = fillStyle;
			var canvas = document.getElementById(canvasId);
			this.ctx = canvas.getContext("2d");
			this.canvasWH = {
				w: canvas.getAttribute("width"),
				h: canvas.getAttribute("height")
			};
			this.ctx.fillStyle = this.fillStyle
		},
		beginDraw: function(num) {
			this.ctx.clearRect(0, 0, this.canvasWH.w, this.canvasWH.h);
			var endAngle = parseFloat(num) * 2 / 100 + this.initAngle;
			this.ctx.beginPath();
			this.ctx.moveTo(this.pos.x, this.pos.y);
			this.ctx.arc(this.pos.x, this.pos.y, this.roundNum, this.initAngle * Math.PI, endAngle * Math.PI);
			this.ctx.lineTo(this.pos.x, this.pos.y);
			this.ctx.fill()
		}
	};
</script>

<style>

	#main {
		width: 100%;
		height: 100%;
	}
</style>